<template>
  <div class="statusLog">
    <div class="panelWrap container">
      <div class="title flex flexac flexjcsb fs14 cfff fwb pl p-r-20">
        <div>{{ fileType ? '查看电梯档案导入结果' : '查看维保人员导入结果' }}</div>
        <i class="el-icon-close" @click="handleCloseDialog" />
      </div>
      <div class="con">
        <div class="tip-msg">
          本次文件上传文件数据<span>有{{ statusData.length }}条数据错误</span>。 请查看详细错误， 更新后再次上传，直至系统提示上传成功。
        </div>
        <el-table
          :data="statusData.slice((paging.pageIndex - 1) * paging.pageSize, paging.pageIndex * paging.pageSize)"
          style="width: 100%"
          class="con-table m-t-30"
          type="expand"
        >

          <template v-for="item in tablehead">
            <el-table-column :key="item.index" :width="item.width" align="center" :prop="item.prop" :label="item.label" />
          </template>

          <el-table-column label="错误原因" align="center">
            <template slot-scope="scope">
              <span class="co-log" style="color:#ff0000">{{ scope.row.name }}</span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        class="paginationWrap co-page flex m-l-10"
        :current-page="paging.pageIndex"
        :page-sizes="[4]"
        :page-size="paging.pageSize"
        :pager-count="5"
        layout="total, sizes, prev, pager, next, jumper"
        :total="paging.total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
      <!-- <div class="flex flextc footerBtn m-t-35 ">
        <el-button class="el-icon-circle-check saveBtn m-r-30" @click="handleSave">保存</el-button>
        <el-button class="el-icon-circle-close clsoeBtn" @click="handleCloseDialog">关闭</el-button>
      </div> -->
    </div>

  </div>
</template>

<script>

// import { showNotice } from '@/utils/toolclass'

export default {
  components: {},
  props: {
    statusData: {
      type: Array,
      default: () => ([])
    },
    fileType: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      paging: {
        pageIndex: 1,
        pageSize: 4,
        total: this.statusData.length
      },
      tablehead: [
        {
          index: 0,
          prop: 'id',
          label: '序号',
          width: '80'
        },
        {
          index: 1,
          prop: 'info',
          label: '错误数据'
        }
      ]
    }
  },
  created() {},
  methods: {
    handleCloseDialog() {
      this.$emit('handleCloseDialog')
    },
    handleSizeChange(val) {
      this.paging.pageSize = val
    },
    handleCurrentChange(val) {
      this.paging.pageIndex = val
    }
  }
}
</script>

<style rel='stylesheet/scss' lang='scss'>
.statusLog {
  .container {
    width: 800px;
    min-height: 480px;
    background-color: #ffffff;
    border-radius: 5px;
    margin-left: 300px;
    .tip-msg{
      span {
        color: #ff0000;
      }
    }
    .con {
      padding-top: 16px;
      p {
        color: #ff0000;
      }
    }
    .footerBtn {
      .defaultbtn {
        width: 75px;
        height: 32px;
      }
    }
  }
}

</style>
